// 权限容器
<template>
<div class="power">

    <Tabs>
        <TabPane :label="item.label" v-for='(item, index) of mods' :key='index'>
            <div class="item">

                <div class="item-content" v-for='(mod) of item.mods' :key='mod.key'>

                    <l-check-kind
                    v-model='data[mod.key]'
                    :title='mod.title'
                    :img='mod.img'
                    :disabled='mod.disabled'
                    ></l-check-kind>
                    
                </div>
                
            </div>
        </TabPane>
    </Tabs>
    
</div>

</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import {store} from '@/store/index'
import imgs from '@/img_path.json'

const checkKind = () => import('@/components/ivew_components/check_kind/index.vue')

@Component({
    components:{
        'l-check-kind': checkKind
    }
})
export default class power extends Vue{
    name:string = 'power'

    // 权限列表数据
    @Prop()
    data

    // 组件配置
    @Prop()
    mods
    
}


</script>

<style scoped lang='scss'>

.power{
    
    padding:  _intervals() 0;
    width: _rem(540px);

}
.item{


    margin-top: _intervals();
    padding: 0  _intervals(2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: _intervals(2);
    grid-row-gap: _intervals(2);

}

</style>